import { Layout } from "antd";
import { Outlet } from "react-router-dom";
import styled from "styled-components";
import SurveyMenu from "./components/SurveyMenu";

const { Header, Sider, Content } = Layout;

const LayoutContainer = styled(Layout)`
  width: 100%;
  height: 100%;
  .ant-layout-header {
    border-bottom: 1px solid #efefef;
  }
  .header-box {
    font-size: 28px;
    font-weight: 700;
  }
  .ant-layout-sider {
    border-right: 1px solid #efefef;
    transition: width 0.3s;
  }
`;

const ContentBox = styled(Content)`
  padding: 15px 20px;
  overflow-y: auto;
`;

export default function Index() {
  return (
    <LayoutContainer>
      <Header>
        <div className="header-box">问卷调查系统</div>
      </Header>
      <LayoutContainer>
        <Sider>
          <SurveyMenu></SurveyMenu>
        </Sider>
        <ContentBox className="main-box">
          <Outlet />
        </ContentBox>
      </LayoutContainer>
    </LayoutContainer>
  );
}
